<template>
  <div class="rank">
    <div class="list" v-for="item in topList" :key="item.title">
      <h3>{{ item.title }}</h3>
      <div
        class="rank-list"
        v-for="itemList in item.list"
        :key="itemList.topId"
      >
        <div class="item">
          <h4>{{ itemList.label }}</h4>
          <ul>
            <li
              v-for="(musicItem, i) in itemList.song"
              :key="itemList.topId + musicItem.songId"
            >
              <span @click="selectmusic(itemList)"
                >{{ i + 1 }}.{{ musicItem.title }}-{{
                  musicItem.singerName
                }}</span
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import List from "@/components/ranking/List.vue";
import axios from "axios";
export default {
  data() {
    return {
      topList: [],
    };
  },
  created() {
    this.getTopList();
  },
  methods: {
    getTopList() {
      axios
        .get("/jsososo/top/category?showDetail=1")
        .then((res) => {
          console.log(res.data.data);
          this.topList = res.data.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectmusic(itemList) {
      const id = itemList.topId;
      // console.log(id);
      // this.$router.push({ name: "PlayListDetail", params: id });
      this.$router.push({ path: `/soaringList/${id}` });
    },
  },
};
</script>

<style scoped>
</style>
